<template>
	<view class="login">
		<image src="../../static/bj.png" class="login-image"></image>
		<view class="login-cont">
			<image src="../../static/logo.png" class="login-logo"></image>
			<!-- 东方华龙集团订餐系统 -->
			<view class="login-title">东方华龙集团订餐系统</view>
			<u-form :model="form" ref="uForm" :rules="rules">
				<u-form-item>
					<view class="login-input">
						<view class="login-input-icon">
							<u-icon name="account" color="#fff" size="24"></u-icon>
						</view>
						<u-input v-model="form.account" placeholder="请输入用户名" border='none'
							placeholderStyle='color: #fff' color='#fff' />
					</view>
				</u-form-item>
				<u-form-item>
					<view class="login-input">
						<view class="login-input-icon">
							<u-icon name="account" color="#fff" size="24"></u-icon>
						</view>
						<u-input v-model="form.userName" placeholder="请输入姓名" border='none'
							placeholderStyle='color: #fff' color='#fff' />
					</view>
				</u-form-item>
				<u-form-item>
					<view class="login-input">
						<view class="login-input-icon">
							<u-icon name="order" color="#fff" size="24"></u-icon>
						</view>
						<u-input v-model="form.userCard" placeholder="请输入身份证号" border='none'
							placeholderStyle='color: #fff' color='#fff' />
					</view>
				</u-form-item>
				<u-form-item>
					<view class="login-input">
						<view class="login-input-icon">
							<u-icon name="phone" color="#fff" size="24"></u-icon>
						</view>
						<u-input v-model="form.userTel" placeholder="请输入手机号" border='none'
							placeholderStyle='color: #fff' color='#fff' type="number" />
					</view>
				</u-form-item>
				<u-form-item>
					<view class="login-input">
						<view class="login-input-icon">
							<u-icon name="lock" color="#fff" size="24"></u-icon>
						</view>
						<u-input v-model="form.password" placeholder="请输入新密码" border='none'
							placeholderStyle='color: #fff' color='#fff' password />
					</view>
				</u-form-item>
				<u-form-item>
					<view class="login-input">
						<view class="login-input-icon">
							<u-icon name="lock" color="#fff" size="24"></u-icon>
						</view>
						<u-input v-model="form.password2" placeholder="请再次输入新密码" border='none'
							placeholderStyle='color: #fff' color='#fff' password />
					</view>
				</u-form-item>
				<view class="login-btn" @click="submit">提交</view>
			</u-form>
		</view>
	</view>
</template>

<script>
	import {
		resetPassword
	} from '@/api/login.js'
	export default {
		data() {
			return {
				form: {
					account: '', //账号
					password: '', //密码
					password2: '', //密码
					userName: '', //姓名
					userCard: '', //证件号码
					userTel: '', //联系方式
				},
				rules: {},
			}
		},
		mounted() {},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			// 登录
			submit() {
				let _this = this;
				// 校验
				if (!_this.form.account ||
					!_this.form.password ||
					!_this.form.userName ||
					!_this.form.userCard ||
					!_this.form.userTel) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				const regCard =
					/(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)/
				if (!regCard.test(_this.form.userCard)) {
					uni.showToast({
						title: '身份证件号不正确',
						icon: 'none'
					});
					return;
				}
				let reg = /^1[3456789]\d{9}$/;
				if (!reg.test(_this.form.userTel)) {
					uni.showToast({
						title: '请输入有效的手机号码',
						icon: 'none'
					});
					return;
				}
				if (_this.form.password !== _this.form.password2) {
					uni.showToast({
						title: '两次新密码不一致',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '正在提交...'
				});
				resetPassword(_this.form).then(res => {
					uni.hideLoading();
					if (res.success) {
						uni.showToast({
							title: '修改成功!',
							icon: 'success'
						});
						setTimeout(() => {
							_this.$u.vuex('vuex_pass', null);
							_this.$u.vuex('vuex_info', null);
							_this.$u.vuex('vuex_zidong', null);
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.login {
		height: 100vh;
		background-image: linear-gradient(45deg, #1D91D7, #32B1BD);

		.login-cont {
			position: absolute;
			top: 7%;
			left: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.login-logo {
				width: 160rpx;
				height: 160rpx;
				margin: 0 auto;
			}

			.login-title {
				color: #fff;
				margin: 30rpx auto;
				font-size: 60rpx;
				font-weight: bold;
				text-shadow: 2px 2px #333;
			}
		}

		.login-image {
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
		}

		.login-btn {
			width: 80%;
			border-radius: 50rpx;
			text-align: center;
			color: #fff;
			margin: 40rpx auto 0;
			font-size: 36rpx;
			border: 1px solid #eee;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 10rpx;
			background: linear-gradient(to right, #32B1BD, #1D91D7);
		}

		.login-input {
			width: 80%;
			border-radius: 50rpx;
			color: #fff;
			margin: 0 auto;
			border: 1px solid #eee;
			height: 70rpx;
			line-height: 70rpx;
			background-color: rgba(255, 255, 255, 0.2);
			display: flex;
			align-items: center;
			padding-right: 20rpx;
		}

		.login-input-icon {
			margin: 0 20rpx;
		}

		.login-small-title {
			width: 75%;
			margin: 20rpx auto;
			font-size: 28rpx;
			text-align: right;
			color: #fff;
			display: flex;
			justify-content: space-between;
		}
	}
</style>